<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Time Duration Input</title>
</head>
<body>
    <label for="start">Start Time:</label>
    <input type="time" id="start">

    <label for="stop">End Time:</label>
    <input type="time" id="stop">

    <label for="duration">Duration:</label>
    <input type="text" id="duration" readonly>

    <script>
        function calculateDuration() {
            const startTime = document.getElementById('start').value;
            const stopTime = document.getElementById('stop').value;

            // Parse the time strings into Date objects
            const startDate = new Date(`1970-01-01T${startTime}`);
            const stopDate = new Date(`1970-01-01T${stopTime}`);

            // Calculate the duration in milliseconds
            const durationMs = stopDate - startDate;

            // Convert milliseconds to hours, minutes, and seconds
            const hours = Math.floor(durationMs / 3600000);
            const minutes = Math.floor((durationMs % 3600000) / 60000);
            const seconds = Math.floor((durationMs % 60000) / 1000);

            // Display the duration in the input field
            document.getElementById('duration').value = `${hours}:${minutes}:${seconds}`;
        }

        // Update the duration every second
        setInterval(calculateDuration, 1000);
    </script>
</body>
</html>